<template>
	<view class="mall_card_page" @click="goToDeatils">
		<image :src="goods.mainImage" style="width: 100%; height: 150px; border-radius: 8px 8px 0 0;" mode="aspectFill">
		</image>
		<view class="shop_info">
			<view class="title u-line-2">{{ goods.name }}</view>
			<view class="price">
				<Price :price="goods.price/100" size="16"></Price>
				<!-- <text class="original_price">￥{{ goods.price/100 }}</text> -->
			</view>
		</view>
	</view>
</template>

<script setup>
	import Price from './price.vue';
	import {
		defineProps
	} from 'vue';
	const props = defineProps({
		goods: Object,
	})

	const goToDeatils = () => {
		uni.navigateTo({
			url: `/subPackages/goods/goods_info?id=${props.goods.id}`
		})
	}
</script>

<style lang="scss">
	.mall_card_page {
		width: 100%;
		border-radius: 8px;
		box-shadow: 0 2px 4px #0000000a;

		.shop_info {
			padding: 8px;

			.title {
				font-size: 14px;
				height: 38px;
			}

			.price {
				margin-top: 12px;
				display: flex;
				align-items: flex-end;
				font-size: 12px;
				color: #666;
			}

			.original_price {
				text-decoration: line-through;
				margin-left: 8px;
			}
		}

	}
</style>